<template>
  <div class="tools-cotent">
    <section class="tools-box">
      <el-tooltip effect="dark" content="视图切换" placement="top">
        <div class="tool-item">
          <el-select
            v-model="sceneMode"
            class="m-2"
            placeholder="Select"
            size="small"
            @change="changeSceneMode"
          >
            <el-option
              v-for="item in sceneModeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="双击转向" placement="top">
        <div class="tool-item">
          <el-switch size="small" v-model="_cameraDblClickMove.flag" @change="dbClickFly"></el-switch>
        </div>
      </el-tooltip>
    </section>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { BQGIS_initCameraDblClickMove } from "../../../../static/CIM/BQGIS-camera/BQGIS-CameraDblClickMove";
import { BQGIS_initRoamingByKey } from "../../../../static/CIM/BQGIS-roamingKey";

const sceneModeOptions = reactive([
  {
    label: "3d",
    value: 3
  },
  {
    label: "2d",
    value: 1
  },
  {
    label: "2.5d",
    value: 2
  }
]);
const sceneMode = ref(viewer.scene.mode);
function changeSceneMode(data) {
  viewer.scene.mode = data;
}
/**
 * 双击转向
 */
let _cameraDblClickMove = reactive({
  entity: null,
  flag: false
});
const dbClickFly = v => {
  if (!_cameraDblClickMove.entity)
    _cameraDblClickMove.entity = BQGIS_initCameraDblClickMove();
  _cameraDblClickMove.flag
    ? _cameraDblClickMove.entity.start()
    : _cameraDblClickMove.entity.stop();
};
let onClick3DVs2D = () => {};
/**
 * 键盘漫游
 */
let _keyboardRoaming = {
  entity: null,
  flag: false,
  key: {
    moveForward: "w",
    moveBackward: "s",
    moveLeft: "a",
    moveRight: "d",
    moveUp: "q",
    moveDown: "e"
  }
};
const keyboardRoaming = () => {
  if (!_keyboardRoaming.entity)
    _keyboardRoaming.entity = BQGIS_initRoamingByKey({
      viewer,
      key: _keyboardRoaming.key
    });
  _keyboardRoaming.flag
    ? _keyboardRoaming.entity.stop()
    : _keyboardRoaming.entity.start();
  _keyboardRoaming.flag = !_keyboardRoaming.flag;
};
const onClickTool = item => {
  switch (item.name) {
    case "双击转向":
      dbClickFly();
      break;
    case "键盘漫游":
      keyboardRoaming();
      break;
    default:
      break;
  }
};
</script>

<style lang="scss" scoped>
.tools-cotent {
  position: absolute;
  top: 60px;
  right: 15px;
  //   width: 200px;
  z-index: 1;
  .tools-box {
    display: flex;
    // justify-content: flex-end;
    background-color: rgba($color: #454f46, $alpha: 0.5);
    padding: 0 5px;
    .tool-item {
      width: 55px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      font-size: 15px;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>